<template>
  <!-- 新增对话框 -->
  <el-dialog
    :visible.sync="editVisible"
    width="40%"
    :before-close="handleClose"
  >
    <el-form :model="editData" :rules="rules" ref="ruleForm" label-width="100px" style="margin-right: 50px;">
      <h1><i class="el-icon-edit"/> 编辑用户 </h1>
      <el-form-item label="用户名" prop="username">
        <el-input v-model="editData.username" clearable show-word-limit maxlength="20"/>
      </el-form-item>
      <el-form-item label="手机号码" prop="phone">
        <el-input v-model="editData.phone" maxlength="11" show-word-limit clearable/>
      </el-form-item>
      <el-form-item label="电子邮箱" prop="email">
        <el-input v-model="editData.email" maxlength="30" show-word-limit clearable/>
      </el-form-item>
      <el-form-item label="个性签名" prop="sign">
        <el-input v-model="editData.sign" maxlength="30" show-word-limit clearable/>
      </el-form-item>
      <el-form-item align="right">
        <el-button v-permission="'user:edit'" @click="cancel('ruleForm')">取消</el-button>
        <el-button v-permission="'user:edit'" @click="resetForm('ruleForm')">重置</el-button>
        <el-button v-permission="'user:edit'" type="primary" @click="submitForm('ruleForm')">确定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import { update } from '@/api/user'
import { PcCookie, Key } from '@/utils/cookie'

export default {
  props: ['editData', 'editVisible'],
  data() {
    // 校验新用户名和旧用户名是否一致，一致抛异常
    // const validateNewAndOldUsername = (rule, value, callback) => {
    //   if (value === this.username) {
    //     callback(new Error('新用户名不能和旧用户一致'))
    //   } else {
    //     callback()
    //   }
    // }
    return {
      rules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
          // { validator: validateNewAndOldUsername, trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '手机号码不能为空', trigger: 'blur' },
          {
            pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/,
            message: '请输入11位合法手机号码',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    // 从 cookie 获取用户名
    username() {
      return PcCookie.get(Key.userInfo) ? JSON.parse(PcCookie.get(Key.userInfo)).username : ''
    }
  },
  methods: {
    // 关闭窗口
    handleClose() {
      this.$refs['ruleForm'].resetFields()
      this.$emit('closeEditDialog')
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    // 取消
    cancel(formName) {
      this.$refs[formName].resetFields()
      this.$emit('closeEditDialog')
    },
    // 提交表单
    async submitForm(formName) {
      this.$refs[formName].validate(async(valid) => {
        if (valid) {
          const response = await update(this.editData)
          if (response.code === 200) {
            this.$message.success(response.message)
            this.handleClose()
            // 刷新数据列表
            this.$emit('fetchData')
          } else {
            this.$message.error(response.message)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
h1 {
  text-align: center;
  margin-bottom: 50px;
}

.el-form {
  margin-bottom: 30px;
}
</style>
